<template>
	<div class="floor">
		<div class="py-container">
			<div class="title clearfix">
				<h3 class="fl">{{floor.name}}</h3>
				<div class="fr">
					<ul class="nav-tabs clearfix">
						<li class="active" v-for="(nav,index) in floor.navList" :key="index">
							<a :href="nav.url" data-toggle="tab">{{nav.text}}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tab-content">
				<div class="tab-pane">
					<div class="floor-1">
						<div class="blockgary">
							<ul class="jd-list">
								<li v-for="(kw,index) in floor.keywords" :key="index">{{kw}}</li>
							</ul>
							<img :src="floor.imgUrl" />
						</div>
						<div class="floorBanner">
							<!-- 轮播图区域 -->
							<div class="swiper-container" ref="atguigu">
								<div class="swiper-wrapper">
									<!-- 遍历生成每一屏 -->
									<div class="swiper-slide" v-for="carouse in floor.carouselList" :key="carouse.id">
										<img :src="carouse.imgUrl">
									</div>
								</div>
								<!-- 小圆点 -->
								<div class="swiper-pagination"></div>

								<!-- 上一张、下一张 -->
								<div class="swiper-button-prev"></div>
								<div class="swiper-button-next"></div>
							</div>
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[0]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[1]" />
							</div>
						</div>
						<div class="split center">
							<img :src="floor.bigImg" />
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[2]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[3]" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	import 'swiper/css/swiper.min.css'

	export default {
		name: 'Floor',
		props:['floor'],
		mounted(){
			new Swiper(this.$refs.atguigu, {
				spaceBetween: 30, //每一屏之间的距离
				speed:1000, //屏的切换速度
				loop:true, //循环轮播
				autoplay: { //自动轮播配置
					delay:1500, //轮播间隔
					disableOnInteraction: false, //鼠标操作后，是否禁用自动轮播
				},
				pagination: {
					el: '.swiper-pagination', //小圆点容器
					clickable: true, //小圆点是否可以点击
				},
				navigation: {
					nextEl: '.swiper-button-next', //下一张按钮的选择器
					prevEl: '.swiper-button-prev', //上一张按钮的选择器
				},
			});
		}
	}
</script>

<style lang="less" scoped>
	.floor {
		margin-top: 15px;

		.py-container {
			width: 1200px;
			margin: 0 auto;

			.title {
				.fl {
					float: left;
					color: #c81623;
					font-size: 20px;
					line-height: 30px;
					margin: 9px 0;
					font-weight: 700;
				}

				.fr {
					float: right;

					.nav-tabs {
						margin: 10px 0 0;
						display: inline-block;

						li {
							float: left;
							line-height: 18px;

							a {
								padding-top: 1px;
								font-weight: 400;
								background-color: #fff;

								&::after {
									content: "|";
									padding: 0 10px;
								}
							}

							&:nth-child(7) {
								a {
									&::after {
										content: "";
									}
								}
							}

							&.active {
								a {
									color: #e1251b;
								}
							}
						}
					}
				}
			}

			.tab-content {
				border-top: 2px solid #c81623;
				border-bottom: 1px solid #e4e4e4;

				.tab-pane {
					.floor-1 {
						height: 360px;
						display: flex;

						.blockgary {
							width: 210px;
							height: 100%;
							background: #f7f7f7;

							.jd-list {
								padding: 15px 0;
								overflow: hidden;

								li {
									list-style-type: none;
									float: left;
									width: 40%;
									margin: 0 10px;
									border-bottom: 1px solid #e4e4e4;
									text-align: center;
									line-height: 26px;
								}
							}

							img {
								width: 100%;
							}
						}

						.floorBanner {
							width: 330px;
							height: 100%;
						}

						.split {
							width: 220px;
							height: 100%;
							position: relative;

							.floor-x-line {
								position: absolute;
								background: #e4e4e4;
								width: 220px;
								height: 1px;
								top: 180px;
							}

							.floor-conver-pit {
								width: 100%;
								height: 50%;

								img {
									width: 100%;
									height: 100%;
									transition: all 400ms;

									&:hover {
										opacity: 0.8;
									}
								}
							}
						}

						.center {
							border: 1px solid #e4e4e4;
						}
					}
				}
			}
		}
	}
</style>